<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-form inline v-model="search" label-position="right">
						<el-form-item label="状态">
							<el-select size="mini" v-model="search.status" clearable>
								<el-option value="" label="全部" />
								<el-option :value="0" label="冻结" />
								<el-option :value="1" label="启用" />
							</el-select>
						</el-form-item>
						<el-form-item label="关键词">
							<el-input v-model="search.keyWord" placeholder="分销商会员昵称包含关键词" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTableGdshop ref="table" tableName="discountActivityTable" :apiObj="apiObj" stripe remoteSort remoteFilter :params="tableParams"
						   :column="tableColumn">
				<template #status="scope">
					<el-tooltip
						effect="dark"
						content="点击切换状态"
						placement="left"
					>
						<el-button type="success" plain v-if="scope.row.status == 1" @click="setStatus(scope.row)">正常</el-button>
						<el-button type="warning" plain v-else @click="setStatus(scope.row)">冻结</el-button>
					</el-tooltip>
				</template>

				<template #account_info="scope">
					<div>
						当前佣金：{{ $TOOL.getMoneyByMinute(scope.row.brokerage) }}
					</div>
					<div>
						已提现佣金：{{ $TOOL.getMoneyByMinute(scope.row.amount_received) }}
					</div>
				</template>
			</scTableGdshop>
		</el-main>
	</el-container>
</template>

<script>
import dayjs from "dayjs";

export default {
	name: "fenxiao-user-index",
	data() {
		return {
			apiObj: this.$API.fenxiao.user,
			baseUrl: '',
			search: {
				keyWord: '',
				invoice_type: '',
			},
			tableParams: {
				order: 'id desc',
			},
			tableColumn: [
				{
					prop: "name",
					label: "分销商名称",
					width: 150
				},
				{
					prop: "m_realname",
					label: "会员信息",
					width: 150
				},
				{
					prop: "fun1_name",
					label: "上级分销商",
					width: 150,
					formatter: function (row, column, cellValue) {
						if (!cellValue) {
							return '-';
						}
						return cellValue;
					}
				},
				{
					prop: "account_info",
					label: "佣金账户"
				},
				{
					prop: "team_num",
					label: "团队人数",
					width: 80,
					formatter: function (row, column, cellValue) {
						return row.mum_num + cellValue;
					}
				},
				{
					prop: "create_at",
					label: "添加时间",
					width: 150,
					formatter: function (row, column, cellValue) {
						if (cellValue < 1) {
							return '-';
						}

						return dayjs(cellValue * 1000).format('YYYY-MM-DD HH:mm:ss');
					}
				},
				{
					prop: "status",
					label: "状态",
					width: 100
				},
			]
		}
	},
	methods: {
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
			}
			this.$refs.table.refresh();
		},
		//搜索
		upsearch(){
			this.$refs.table.upData(this.search)
		},
		setStatus(_item) {
			this.$confirm("此操作将切换当前账号的状态, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					this.$API.fenxiao.user
						.setStatus({ ids: [_item.id] })
						.then((res) => {
							if (res.code === 0) {
								this.$message({
									type: "success",
									message: "切换成功"
								});
								_item.status = _item.status === 1 ? 0 : 1;
							}
							else {
								this.$message.error(res.message);
							}
						})
				})
				.catch(() => {});
		}
	}
}
</script>

<style scoped>

</style>
